<script>
  $(function () {
    $("#jump_date").change(function(){
      window.location = "<?=site_url("monitoring/")?>/index/"+$("#jump_date").val();
    });
  });
</script>
<script src="<?=$url?>js/chart/jqplot.barRenderer.min.js"></script>
<script src="<?=$url?>js/chart/jqplot.pointLabels.min.js"></script>
<script src="<?=$url?>js/chart/jqplot.categoryAxisRenderer.min.js"></script>
<script src="<?=$url?>js/chart/jqplot.logAxisRenderer.min.js"></script>
<script src="<?=$url?>js/chart/jqplot.canvasTextRenderer.min.js"></script>
<script src="<?=$url?>js/chart/jqplot.canvasAxisTickRenderer.min.js"></script>
<div id="main-content">
  <div class="container-fluid">
    <div class="row-fluid">
      <div class="span12">
        <div class="widget-block">
          <?php
          if($message == 'filed'){
          ?>
          <div class="alert alert-error fade in">
            <button data-dismiss="alert" class="close" type="button">×</button>
            <strong>Filed!</strong> Fail to save data.
          </div>
          <?php
          }
          if($message == 'sukses'){
          ?>
          <div class="alert alert-success fade in">
            <button data-dismiss="alert" class="close" type="button">×</button>
            <strong>Success!</strong> Kategori juklak baru berhasil dibuat.
          </div>
          <?php
          }
          ?>
          <div class="widget-head">
            <h5><?=$title_table?></h5>
            <div class="widget-control pull-right">
              <a href="#" data-toggle="dropdown" class="btn dropdown-toggle"><i class="icon-cog"></i><b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="<?php print site_url("monitoring/export-xls-tahunan/{$outlet[0]->id_outlet}/{$tahun_select}") ?>"><i class="black-icons excel_document"></i> Export to XLS</a></li>
              </ul>
            </div>
          </div>
          <div class="widget-content">
            <div class="widget-selectbox">
              <ul>
                <!--<li class="row-counts">Pending Task: 5</li>-->
                <li>
                  <form action="#" method="get">
                    <div class="input-prepend"> <span class="add-on"><i class="icon-list-alt"></i></span>
                      <?php print $this->form_eksternal->form_dropdown('tahun', $tahun, array($tahun_select), 'id="tahun_select"')?>
                    </div>
                  </form>
                </li>
              </ul>
            </div>
            <div class="widget-box">
              <table class="data-tbl-boxy3 table">
                <thead>
                  <tr>
                    <th>No</th>
                    <th>Bulan</th>
                    <th>Target UE</th>
                    <th>UE</th>
                    <th>UE Proyeksi</th>
                    <th>Target UT</th>
                    <th>UT</th>
                    <th>UT Proyeksi</th>
                    <th>Target Omset</th>
                    <th>Omset</th>
                    <th>Omset Proyeksi</th>
                    <th>Target Gross Margin</th>
                    <th>Gross Margin</th>
                    <th>Gross Margin Proyeksi</th>
                    <th>Option</th>
                  </tr>
                </thead>
                <tbody>
                  <?php
                  foreach ($bulan as $kb => $bln) {
                    
//                    omset / day(now) * total hari bulan
//                    costume view filter tahun
//                    grafik
//                    unit entri mulai target, aktual, proyeksi (bulanan)
//                    unit transaksi
//                    omset
//                    ----------------------------------------------------
//                    consumen baru dan lama, jam transaksi juga di tarik
//                    target isian untuk tiap bulan dalam 1 tahun
//                    
//                    show/hide untuk detail activity
//                    tarik dari hari -5
//                    margin paling bawah di hide
//                    format_number untuk detail activity
//                    AR, AP, Overdue -> finance (POS)
//                    PICA import dari form breifing POS, jika ada comment jadiin PICA jika tidak abaikan
//                    print to xls untuk PICA outlet
//                    
                    
                    
//                    $unit_entry = $dataunitentry[$kb][0]->service + $dataunitentry[$kb][0]->service_belanja;
//                    $ue_proyeksi = $unit_entry/date("m")*12;
//                    $omset = $dataunitentry[$kb][0]->omset_service + $dataunitentry[$kb][0]->omset_service_plus + $dataunitentry[$kb][0]->omset_belanja_plus + $dataunitentry[$kb][0]->omset_belanja;
//                    $omset_proyeksi = ($datatarget[$kb][0]->service * $datatarget[$kb][0]->rata_service) + ($datatarget[$kb][0]->service_belanja * $datatarget[$kb][0]->rata_service) + ($datatarget[$kb][0]->service_belanja * $datatarget[$kb][0]->rata_belanja) + ($datatarget[$kb][0]->belanja * $datatarget[$kb][0]->rata_belanja);
//                    $total_transaksi = $dataunitentry[$kb][0]->service + $dataunitentry[$kb][0]->service_belanja + $dataunitentry[$kb][0]->belanja;
                    $link_outlet = site_url("monitoring/detail-bulan/".$kb."/".$outlet[0]->id_outlet);
                   
                  
				    if(empty($dataunitentry[$kb][0]->id_actifity_report)){
                   $chart_entry =  site_url("outlet/aktifitas/daftar"); 
                   $history_pica  =  site_url("outlet/aktifitas/daftar"); 
                    $data_pica = site_url("outlet/aktifitas/daftar"); 
                     $excel_data = site_url("outlet/aktifitas/daftar"); 
                    $export_xls = site_url("outlet/aktifitas/daftar"); 
                    }else{
                       $data_pica = site_url("outlet/aktifitas/history/".$dataunitentry[$kb][0]->id_actifity_report);
                       $history_pica =  site_url("outlet/aktifitas/pica/".$dataunitentry[$kb][0]->id_actifity_report);
                       $chart_entry= site_url("outlet/aktifitas/unit-entry-chart/".$dataunitentry[$kb][0]->id_actifity_report);
                       $excel_data = site_url("outlet/aktifitas/half-export-xls/".$dataunitentry[$kb][0]->id_actifity_report);
                       $export_xls =site_url("outlet/aktifitas/fs-export-xls/".$dataunitentry[$kb][0]->id_actifity_report); 
                  } 
                  
//                  variable
//                  ue
                  $ue = $dataunitentry[$kb][0]->service + $dataunitentry[$kb][0]->service_belanja;
                  $target_ue = $datatarget[$kb][0]->service + $datatarget[$kb][0]->service_belanja;
                  $proyeksi_ue = $ue/$dataunitentry[$kb][0]->max_tanggal * $dataunitentry[$kb][0]->day_in_month;
                  
//                  ut
                  $ut = $dataunitentry[$kb][0]->belanja + $dataunitentry[$kb][0]->service_belanja;
                  $target_ut = $datatarget[$kb][0]->belanja + $datatarget[$kb][0]->service_belanja;
                  $proyeksi_ut = $ut/$dataunitentry[$kb][0]->max_tanggal * $dataunitentry[$kb][0]->day_in_month;
                  
//                  omset
                  $omset = $dataunitentry[$kb][0]->omset_service + $dataunitentry[$kb][0]->omset_service_plus + $dataunitentry[$kb][0]->omset_belanja_plus + $dataunitentry[$kb][0]->omset_belanja;
                  
                  $target_omset_service = $datatarget[$kb][0]->service * $datatarget[$kb][0]->rata_service;
                  $target_omset_service_plus = $datatarget[$kb][0]->service_belanja * $datatarget[$kb][0]->rata_service;
                  $target_omset_belanja_plus = $datatarget[$kb][0]->service_belanja * $datatarget[$kb][0]->rata_belanja;
                  $target_omset_belanja = $datatarget[$kb][0]->belanja * $datatarget[$kb][0]->rata_belanja;
                  
                  $target_omset = $target_omset_service + $target_omset_service_plus + $target_omset_belanja_plus + $target_omset_belanja;
                  $proyeksi_omset = $omset/$dataunitentry[$kb][0]->max_tanggal * $dataunitentry[$kb][0]->day_in_month;
                  
//                  gross margin
                  $gm = $omset - $dataunitentry[$kb][0]->hpp;
                  $target_gm = $target_omset - ($target_omset - ($datatarget[$kb][0]->target_hpp/100 * $target_omset));
                  $proyeksi_gm = $gm/$dataunitentry[$kb][0]->max_tanggal * $dataunitentry[$kb][0]->day_in_month;
                  
//                  variable
                  
                    print "
                  <tr>
                    <td>{$kb}</td>
                    <td><a href='{$link_outlet}'>{$bln}</a></td>
                      
                    <td style='text-align: right'>".number_format($target_ue, 0, ",", ".")."</td>
                    <td style='text-align: right'>".number_format($ue, 0, ",", ".")."</td>
                    <td style='text-align: right'>".number_format($proyeksi_ue, 0, ",", ".")."</td>
                      
                    <td style='text-align: right'>".number_format($target_ut, 0, ",", ".")."</td>
                    <td style='text-align: right'>".number_format($ut, 0, ",", ".")."</td>
                    <td style='text-align: right'>".number_format($proyeksi_ut, 0, ",", ".")."</td>
                      
                    <td style='text-align: right'>".number_format($target_omset, 0, ",", ".")."</td>
                    <td style='text-align: right'>".number_format($omset, 0, ",", ".")."</td>
                    <td style='text-align: right'>".number_format($proyeksi_omset, 0, ",", ".")."</td>
                      
                    <td style='text-align: right'>".number_format($target_gm, 0, ",", ".")."</td>
                    <td style='text-align: right'>".number_format($gm, 0, ",", ".")."</td>
                    <td style='text-align: right'>".number_format($proyeksi_gm, 0, ",", ".")."</td>
                      <td>
                    <div class='btn-group'>
                        <button data-toggle='dropdown' class='btn btn-small dropdown-toggle'>Action<span class='caret'></span></button>
                        <ul class='dropdown-menu'>
                          <li><a href='{$history_pica}'>History</a></li>
                          <li><a href='{$chart_entry}'>Chart Unit Entry</a></li>
                          <li><a href='{$excel_data}'>XLS (1-15)</a></li>
                          <li><a href='{$export_xls}'>Export to XLS</a></li>
                        </ul>
                      </div>  
                    </td>
                  </tr>";
                    $ticks .= "'{$bln}',";
                      $s1 .= "{$target_ue},";
                      $s2 .= "{$ue},";
                      $s3 .= "{$proyeksi_ue},";
                      $s4 .= ($target_omset/1000000).",";
                      $s5 .= ($omset/1000000).",";
                      $s6 .= ($proyeksi_omset/1000000).",";
                      $s7 .= ($target_ut).",";
                      $s8 .= ($ut).",";
                      $s9 .= ($proyeksi_ut).",";
                  }?>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row-fluid" style="display: <?=$hide?>">
			<div style="width: 100%">
				<div class="graph-wrap">
          <div class="chart-block">
            <div id="chart5" style="height: 500px;">
            </div>
          </div>
        </div>
			</div>
		</div>
    <div class="row-fluid" style="display: <?=$hide?>">
			<div style="width: 100%">
				<div class="graph-wrap">
          <div class="chart-block">
            <div id="chart7" style="height: 500px;">
            </div>
          </div>
        </div>
			</div>
		</div>
    <div class="row-fluid" style="display: <?=$hide?>">
			<div style="width: 100%">
				<div class="graph-wrap">
          <div class="chart-block">
            <div id="chart6" style="height: 500px">
            </div>
          </div>
        </div>
			</div>
		</div>
  </div>
</div>

<script>
  
  $(document).ready(function(){
    $("#tahun_select").change(function(){
      window.location = "<?php print site_url("monitoring/laporan-tahunan/".$outlet[0]->id_outlet)?>/" + $("#tahun_select").val();
//      alert($("#tahun_select").val());
    });
  });
  
  $(function(){
    var s1 = [<?=$s1?>];
    var s2 = [<?=$s2?>];
    var s3 = [<?=$s3?>];
    // Can specify a custom tick Array.
    // Ticks should match up one for each y value (category) in the series.
    var ticks = [<?=$ticks?>];
    var plot1 = $.jqplot('chart5', [s1, s2, s3], {
        // The "seriesDefaults" option is an options object that will
        // be applied to all series in the chart.
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
			 shadow:false,
            rendererOptions: {fillToZero: true}
        },
        highlighter: {
            show: true,
            showLabel: true,
            tooltipAxes: 'y',
            sizeAdjust: 1 , tooltipLocation : 'ne'
        },
        title: 'UE',
        // Custom labels for the series are specified with the "label"
        // option on the series option.  Here a series option object
        // is specified for each series.
        series:[
            {label:'Target UE'},
            {label:'UE'},
            {label:'UE Proyeksi'}
        ],
        // Show the legend and put it outside the grid, but inside the
        // plot container, shrinking the grid to accomodate the legend.
        // A value of "outside" would not shrink the grid and allow
        // the legend to overflow the container.
        legend: {
            show: true,
            placement: 'outsideGrid'
        },
	grid: {
            background: '#fff',
            drawBorder: false,
            shadow: false,
            gridLineColor: '#ccc',
            gridLineWidth: 1
        },
        axes: {
            // Use a category axis on the x axis and use our custom ticks.
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks,
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                tickOptions: {
                    labelPosition: 'middle',
                    fontSize: '8pt',
                    angle: -90
                }
            },
            // Pad the y axis just a little so bars can get close to, but
            // not touch, the grid boundaries.  1.2 is the default padding.
            yaxis: {
                pad: 1.05,
                tickOptions: {formatString: '%d'}
            }
        }
    });
    
    var s1 = [<?=$s7?>];
    var s2 = [<?=$s8?>];
    var s3 = [<?=$s9?>];
    // Can specify a custom tick Array.
    // Ticks should match up one for each y value (category) in the series.
    var ticks = [<?=$ticks?>];
    var plot1 = $.jqplot('chart7', [s1, s2, s3], {
        // The "seriesDefaults" option is an options object that will
        // be applied to all series in the chart.
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
			 shadow:false,
            rendererOptions: {fillToZero: true}
        },
        highlighter: {
            show: true,
            showLabel: true,
            tooltipAxes: 'y',
            sizeAdjust: 1 , tooltipLocation : 'ne'
        },
        title: 'UT',
        // Custom labels for the series are specified with the "label"
        // option on the series option.  Here a series option object
        // is specified for each series.
        series:[
            {label:'Target UT'},
            {label:'UT'},
            {label:'UT Proyeksi'}
        ],
        // Show the legend and put it outside the grid, but inside the
        // plot container, shrinking the grid to accomodate the legend.
        // A value of "outside" would not shrink the grid and allow
        // the legend to overflow the container.
        legend: {
            show: true,
            placement: 'outsideGrid'
        },
	grid: {
            background: '#fff',
            drawBorder: false,
            shadow: false,
            gridLineColor: '#ccc',
            gridLineWidth: 1
        },
        axes: {
            // Use a category axis on the x axis and use our custom ticks.
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks,
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                tickOptions: {
                    labelPosition: 'middle',
                    fontSize: '8pt',
                    angle: -90
                }
            },
            // Pad the y axis just a little so bars can get close to, but
            // not touch, the grid boundaries.  1.2 is the default padding.
            yaxis: {
                pad: 1.05,
                tickOptions: {formatString: '%d'}
            }
        }
    });
    
    var sr1 = [<?=$s4?>];
    var sr2 = [<?=$s5?>];
    var sr3 = [<?=$s6?>];
    // Can specify a custom tick Array.
    // Ticks should match up one for each y value (category) in the series.
    var ticksr = [<?=$ticks?>];
    var plot2 = $.jqplot('chart6', [sr1, sr2, sr3], {
        // The "seriesDefaults" option is an options object that will
        // be applied to all series in the chart.
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
			 shadow:false,
            rendererOptions: {fillToZero: true}
        },
        highlighter: {
            show: true,
            showLabel: true,
            tooltipAxes: 'y',
            sizeAdjust: 1 , tooltipLocation : 'ne'
        },
        title: 'Omset (dalam jutaan rupiah)',
        // Custom labels for the series are specified with the "label"
        // option on the series option.  Here a series option object
        // is specified for each series.
        series:[
            {label:'Target Omset'},
            {label:'Omset'},
            {label:'Omset Proyeksi'}
        ],
        // Show the legend and put it outside the grid, but inside the
        // plot container, shrinking the grid to accomodate the legend.
        // A value of "outside" would not shrink the grid and allow
        // the legend to overflow the container.
        legend: {
            show: true,
            placement: 'outsideGrid'
        },
	grid: {
            background: '#fff',
            drawBorder: false,
            shadow: false,
            gridLineColor: '#ccc',
            gridLineWidth: 1
        },
        axes: {
            // Use a category axis on the x axis and use our custom ticks.
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticksr,
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                tickOptions: {
                     labelPosition: 'middle',
                     fontSize: '8pt',
                    angle: -90
                }
            },
            // Pad the y axis just a little so bars can get close to, but
            // not touch, the grid boundaries.  1.2 is the default padding.
            yaxis: {
                pad: 1.05,
                tickOptions: {formatString: '%d'}
            }
        }
    });
});
</script>